<template>
  <div>
    <el-divider>基本信息</el-divider>
    <div class="dialog_left">
      <div v-if="form.image">
        <Image-preview :src="form.image" width="100%" height='344px'></Image-preview>
      </div>
      <div>
        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item label="编号">{{ form.materialNum || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物料名称">{{ form.materialName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类别">{{ form.typeName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="规格型号">{{ form.model }} </el-descriptions-item>
          <el-descriptions-item label="单位">{{ form.unitName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <dict-tags :options="SparePartsAndConsumables" :value="form.kind" />
          </el-descriptions-item>
          <el-descriptions-item label="供应商">{{ form.supplierName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="库存预警值">{{ form.lowerLimit || '-' }} ~ {{ form.highLimit || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="采购周期（天）">{{ form.purchaseCycle || '-' }} 天</el-descriptions-item>
          <el-descriptions-item label="更换周期（天）">{{ form.replaceCycle || '-' }} 天</el-descriptions-item>
          <el-descriptions-item label="状态">
            <dict-tag :options="statusFlag" :value="form.status" />
          </el-descriptions-item>
          <el-descriptions-item label="备注">{{ form.remark || '-' }}</el-descriptions-item>
          <el-descriptions-item label="适用设备">{{ handleeaPartInfoVos(form.eaPartInfoVos) || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider>相关附件</el-divider>
    <el-link type="primary" :disabled="!form.file" :href="form.file" target="_blank">
      <i class="el-icon-document"></i>
      <span>下载附件{{ handleSubstring(form.file) }}</span>
    </el-link>
  </div>
</template>

<script>
import { listDetail } from '@/api/deviceConsumable/management'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {
      },
      dict: [],//单位字典列表
      typedict: [],//类别列表
      supplierdict: [],//供应商列表
      dictdatalist: [],
      rules: {
        equipmentName: { required: true, message: '必填', trigger: 'blur' },
        brand: { required: true, message: '必填', trigger: 'blur' },
        model: { required: true, message: '必填', trigger: 'blur' },
        supplierId: { required: true, message: '必填', trigger: 'blur' },
        typeId: { required: true, message: '必填', trigger: 'blur' },
        unit: { required: true, message: '必填', trigger: 'blur' },
        meterageFlag: { required: true, message: '必填', trigger: 'blur' },
        image: { required: true, message: '必填', trigger: 'blur' },
        meterageNum: { required: true, message: '必填', trigger: 'blur' },
      }
    }
  },
  created () {
    this.getlist()
  },
  computed: {

  },
  methods: {
    async getlist () {
      const { data: res } = await listDetail(this.parentid);
      this.form = res
    },
    // 适用设备展示数据-----------------------------------------------------------------------
    handleeaPartInfoVos (val) {
      if (val && val !== undefined) {
        return val.map(item => item.equipmentName).join(',')
      } else {
        return '-'
      }
    },
    // 附件数据重组
    handleSubstring (str) {
      if (str) {
        const index = str.lastIndexOf(".");
        str = str.substring(index + 1, str.length);
        return '.' + str
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
  display: flex;
}

.dialog_left>div:nth-child(1) {
  flex: 1
}

.dialog_left>div:nth-child(2) {
  flex: 3;
  margin-left: 10px
}

/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
</style>